Skip to main content

Component naming and structure

Names must be clear and unambiguous. It helps you to navigate in large number of objects and simplify supporting.

When object names obey this rules, you always be understand what you use just by name and refactor be easy.

Common principles​

Names of all interfaces and exported blocks and elements should be CamelCase

Exported interfaces should start from prefix I​

This way make search in IDE more easy and assist to understand type of imported object and different interface from JS object.

Name entities by meaning and not by content​

For example modifier Component_view_error instead Component_view_red.

It important for independency names from values. For example, color of action button may be different in some projects and you should abstract it.

Block​

Interface​

Block must export interface with own props.

It needs to able create other implementation of element and interact with block from other objects.

Name pattern: I + ComponentName + Props

Example

  • IButtonProps
  • ITabMenuProps

Component​

Block must export object of type React.ComponentType which implement own interface.

Name pattern: ComponentName

Example

  • Button
  • TabMenu

Feature HOC​

Block features may export HOC for apply this feature on base implementation of block.

Name pattern: with + ComponentName + FeatureName

Example

  • withMenuDesktop
  • withSelectDesktop

Class name constructor​

Block must export function which construct className property value for elements and modifiers

Name pattern: cn + ComponentName

Example

  • cnButton
  • cnTabMenu

Element​

Interface​

Element must export interface with own props.

Name pattern: I + ComponentName + ElementName

Example

  • IButtonText
  • ITabMenuItemText

Context​

Element may export context object which implement own interface.

It need to simplify deep forward props.

Name pattern: ComponentName + ElementName + Context

Example

  • SelectTriggerContext
  • SelectListContext

Component​

Element must export object of type React.ComponentType which implement own interface.

Name pattern: ComponentName + ElementName

Example

  • ButtonText
  • TabMenuItemText

Modifier​

Interface​

Modifier must export interface with props which add.

Name pattern: IMod + ComponentName + ModName

Example

  • IModButtonViewDefault
  • IModTabMenuViewAction

HOC​

Modifier must export HOC for apply to block.

Name pattern: withMod + ComponentName + ModName

Example

  • withModButtonViewAction
  • withModTabMenuViewDefault

Dependency injection registry​

Interface​

Registry must export interface with items which it contains.

Feature specific registry (like platform registry) may extend common registry interface and add or redefine some items.

Name pattern: I + ComponentName + FeatureName + Registry

Example

  • IButtonRegistry
  • ITabMenuRegistry

Example with feature scope

  • IButtonDesktopRegistry
  • ITabMenuExperementalIconsRegistry

Registry​

All registries (except index files) must export registry object.

Name pattern: ComponentName + FeatureName + Registry

Example

  • ButtonRegistry
  • TabMenuRegistry

Example with feature scope

  • ButtonDesktopRegistry
  • TabMenuExperementalIconsRegistry

Also, registry file may export object regObjects which contains all dependency objects